<template>
    <div class="row-item">
        <div class="name">{{ name }}</div>
        <div class="name">{{ time }}</div>
        <div class="icon" @click="iconClick">
            <el-icon v-if="type == 'add'"><Plus /></el-icon>
            <el-icon v-if="type == 'delete'"><Close /></el-icon>
            <el-icon v-if="type == 'success'"><Check /></el-icon>
        </div>
    </div>
</template>

<script setup lang="ts">
import { Plus, Close, Check } from '@element-plus/icons-vue';
// import Icon from '@/components/Icon/icon.vue'
const props = defineProps<{
    name: string,
    time: string,
    type: string,
    id: string | number
}>()
const emit = defineEmits(['iconClick'])

const iconClick = () => {
    emit('iconClick', props.type)
}
</script>

<style lang="css" scoped>
.row-item {
    display: flex;
    align-items: center;
    width: 100%;
    justify-content: space-between;
    height: 40px;
    cursor: pointer;
}
.name {
    margin: 0 40px;
    width: 150px;
    text-align: center;
    font-size: 14px;
}
.icon {
    width: 30px;
    height: 30px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    cursor: pointer;
    margin-right: 20px;
}
</style>